<template>
    <view class="content">
        <view class="order-tabs">
            <tab ref="tab" :list="tabList" @tabChange="tabChangeCustom" :index="active"></tab>
        </view>

        <view class="order-list">
			<view class="order-wrap" v-for="(item, index) in tabList[active].list">
				<order-item :item="item" :key="item.id" @onRefresh="refresh"></order-item>
			</view>
            <!-- 商品骨架 -->
            <template v-for="i in ['a', 'b', 'c', 'd']">
                <view class="skeleton-wrap"
                      v-if="tabList[active].list.length === 0 &&
						!tabList[active].finished &&
						!tabList[active].empty"
                >
                    <skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="4" avatarSize="250rpx"></skeleton>
                </view>
            </template>
        </view>

        <!-- 加载状态 -->
        <view class="load-status">
            <empty v-if="tabList[active].empty" emptyText="您还没有订单呦~" emptyType="order" :height="60"></empty>
        </view>

        <!-- 回到顶部 -->
        <u-back-top :scroll-top="scrollTop" top="10"></u-back-top>
		
		<!-- 为您推荐 -->
		<view class="recommend" v-if="recommend.list.length > 0">
			<view class="header">
				<view class="line"></view>
				<view class="title">为您推荐</view>
				<view class="line"></view>
			</view>
			<view class="goods-wrap" v-for="(item, index) in recommend.list">
				<goods-item :item="item" :key="item.id" :index="index"></goods-item>
			</view>
		</view>
		
		<view class="load-status">
			<load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!recommend.finished && !recommend.empty"
			           :contentText="contentText"></load-more>
			<load-more status="noMore" color="#c6c6c6" v-if="recommend.finished" :contentText="contentText"></load-more>
		</view>
    </view>
</template>

<script>
    import Tab from "@/components/Tab";
    import OrderItem from "@/components/OrderItem";
    import GoodsItem from "@/components/GoodsItem";
    import Empty from "@/components/Empty";
    import Skeleton from '@/components/uni/Skeleton';
    import LoadMore from "@/components/uni/LoadMore";
    import loader from '@/utils/mixin/loader';
    export default {
        name: "list",
        mixins: [loader],
        components: {
            Tab,
			OrderItem,
			GoodsItem,
            Empty,
            Skeleton,
            LoadMore,
        },
		data() {
			return {
				recommend: {
					loading: false,
					finished: false,
					error: false,
					empty: false,
					page: 1,
					list: []
				},
				recommendPagination: {},
				recommendParams: {
				    page: 1,
				    size: 5,
				    order: '',
				    sort: 'desc',
				},
			}
		},
        onLoad(options) {
			let tabList = [
				{
					label: '待发货'
				},
				{
					label: '待收货'
				},
				{
					label: '已完成'
				}
			];
			
			tabList.forEach(item => {
			    item.loading = false;
			    item.finished = false;
			    item.error = false;
			    item.empty = false;
			    item.page = 1;
			    item.list = [];
			});
			
			this.tabList[0].label = '全部';
			
			this.tabList = this.tabList.concat(tabList);
			
            if (options.type) {
				this.active = parseInt(options.type);
				this.onRefresh(this.tabList[this.active]);
            } else {
				this.initPage();
			}
        },
        onShow() {
            // #ifdef MP-WEIXIN
            uni.reportAnalytics('enter_dingdanlb');
            // #endif
        },
        methods: {
            initPage() {
				this.loadMore(this.tabList[this.active]);
            },
            // 加载前参数处理
            beforeLoader(item) {
                // 根据分类id筛选订单
				if (this.active === 0) {
                    delete this.params.status;
				}
				if (this.active === 1) {
					this.params.status = 1;
				}
				if (this.active === 2) {
					this.params.status = 2;
				}
				if (this.active === 3) {
					this.params.status = 3;
				}

                this.service = this.$service.order.order.page(this.params);
                return true;
            },
			afterLoader() {
				if (this.tabList[this.active].empty || this.tabList[this.active].finished) {
					this.getRecommendList();
				}
			},
            refresh() {
                this.onRefresh(this.tabList[this.active]);
            },
			tabChangeCustom(index) {
				this.tabChange(index);
				
				this.recommend.list = [];
				this.recommend.loading = true;
				this.recommend.finished = false;
				this.recommend.empty = false;
				this.recommend.page = 1;
			},
			async getRecommendList() {
				if (!this.recommend.empty && !this.recommend.finished) {
				    this.recommendParams.page = this.recommend.page;
					
				    this.recommend.loading = true;
				
				    let res = await this.$service.shopping.goods.page(this.recommendParams);
				    this.recommend.list = this.recommend.list.concat(res.list);
				    if (res.subData) {
				        this.recommend.subData = res.subData;
				    }
				    this.recommendPagination = res.pagination;
				    // 加载状态结束
				    this.recommend.loading = false;
				    uni.hideLoading();
				    this.recommend.page += 1;
				
				    // 暂无数据
				    if (this.recommend.list.length === 0) {
				        this.recommend.empty = true;
				        this.recommend.page = 1;
				    } else if (this.recommend.list.length >= res.pagination.total) {
				        // 数据全部加载完成
				        this.recommend.finished = true;
				    }
				}
			}
        },
		onReachBottom() {
			// 订单加载完成之后触发推荐加载
			if (this.tabList[this.active].empty || this.tabList[this.active].finished) {
				if (!this.recommend.loading) {
					this.getRecommendList();
				}
			}
		}
    }
</script>

<style lang="scss" scoped>
.content {
	.order-list {
		padding: 0 20rpx;
		margin-top: 10rpx;
		.order-wrap {
			margin-bottom: 20rpx;
			&:last-child {
				margin-bottom: 0;
			}
		}
		.skeleton-wrap {
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	.recommend {
		padding: 0 20rpx;
		margin-top: 20rpx;
		.header {
			@include flexBox(center, center);
			.title {
				text-align: center;
				font-size: 28rpx;
				color: #999999;
				margin: 0 20rpx;
			}
			.line {
				background: #D8D8D8;
				width: 140rpx;
				height: 2rpx;
			}
		}
		.goods-wrap {
			margin-top: 20rpx;
		}
	}
}
/deep/.u-tabs {
	position: relative;
	.u-tab-item {
		position: relative;
		z-index: 2;
	}
	.u-tab-bar {
		height: 14rpx!important;
		width: 70rpx!important;
		margin-left: -15rpx;
		bottom: 10rpx;
		z-index: 1;
	}
}
</style>